<template>
  <view class="tab-bar-info">
    <view class="tab-bar">
      <view class="item" :class="{'active':props.selectStr ==='聊天'}" @click="onTabBar('home')">
        <image src="/static/images/nav/chat_ac.png" v-show="props.selectStr ==='聊天'"></image>
        <image src="/static/images/nav/chat.png" v-show="props.selectStr !=='聊天'"></image>
        <text>聊天</text>
        <view class="tag" v-if="store.state.chat.countMsg > 0">
          <text>{{store.state.chat.countMsg}}</text>
        </view>
      </view>
      <view class="item" :class="{'active':props.selectStr ==='通讯录'}" @click="onTabBar('AddressBook')">
        <image src="/static/images/nav/tx_ac.png" v-show="props.selectStr ==='通讯录'"></image>
        <image src="/static/images/nav/tx.png" v-show="props.selectStr !== '通讯录'"></image>
        <text>通讯录</text>
        <view class="tag" v-if="store.state.chat.countFriendMsg > 0">
          <text>{{store.state.chat.countFriendMsg}}</text>
        </view>
      </view>
      <view class="item" :class="{'active':props.selectStr ==='我的'}" @click="onTabBar('my')">
        <image src="/static/images/nav/my_ac.png" v-show="props.selectStr ==='我的'"></image>
        <image src="/static/images/nav/my.png" v-show="props.selectStr !=='我的'"></image>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {defineProps, ref, watch} from 'vue'
import {useStore} from "vuex";

const store = useStore();
const props = defineProps({
  selectStr: {
    type: String,
    default: '聊天',
  },
})

/**
 * 路由点击
 * @param route
 */
const onTabBar = (route) => {
  uni.switchTab({
    url: `/pages/${route}/${route}`
  })
}
</script>

<style scoped lang="scss">
@import "TabBar.scss";
</style>
